<template>
  <div>
    <!--头部+banner-->
    <div class="a-1">
      <!--顶部导航-->
      <div class="a-2">
        <div class="a-3">
          <Header v-bind:state="2"></Header>
        </div>
      </div>
      <!--banner-->
      <div class="target a-9" id="target-2">
        <div>
          <div>
            <img src="@/assets/image/ny_banner1.png" />
          </div>
        </div>
      </div>
      <!--内页详情-->
      <div class="c-1">
        <div class="c-2">
          <div class="b-8 c-3">
            <div class="b-9">
              当前位置：
              <a href="javascript:;">首页</a> >
              <a href="javascript:;">作品详情</a>
            </div>
          </div>
          <div class="c-4">
            <div class="c-5">
              <div class="swiper-container swiper-containerTow">
                <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <img class="c-6" v-if="Work.coverImage" :src="Work.coverImage" />
                    <!-- <img class="c-6" v-else src="@/assets/image/show_img1.png" /> -->
                  </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="pagination"></div>
              </div>
              <div class="a-28 c1-7">
                <span>{{Work.empowerType==0?'部分转让':'全部转让'}}</span>
              </div>
            </div>
            <div class="c-7">
              <div class="c-8">{{Work.productName}}</div>
              <div class="c-9 c-13">
                <div class="c-10">
                  ￥
                  <span>{{Work.priceType==0?Work.price/100:'面议'}}</span>
                </div>
                <div class="c-10">
                  <span class="c-11">发布时间：</span>
                  <span class="c-11">{{Work.createTime}}</span>
                </div>
              </div>
              <div class="c-9 c-14">
                <div class="c-10">
                  <span class="c-11">作品类型：</span>
                  <span class="c-11">{{Work.tradingType==0?worksTypeFormat(Work.hzjyWorks):projectTypeFormat(Work.hzjyProject)}}</span>
                </div>
                <div class="c-10">
                  <span class="c-11">代理机构：</span>
                  <span class="c-11">华中国家版权交易中心</span>
                </div>
              </div>

              <div class="c1-15">
                <a class="c-15" href="javascript:;">立即咨询</a>
                <span class="c1-16" @click="Addsc(Work.productId)">
                  <i></i>
                  <span>收藏</span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--消息通知-->
      <div class="a-14">
        <div class="a-15">
          <img class="a-16" src="@/assets/image/tz.png" />
          <div class="a-17">
            <div class="swiper-container swiper-containerOne">
              <div class="swiper-wrapper clearfix">
                <div class="swiper-slide" v-for="(item,index) in noticeList" :key="index">
                  <a href="javascipt:;">{{item.noticeContent}}</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--内容-->
    <div class="c-16">
      <div class="c-17">
        <div class="c-18">
          <ul class="c-19">
            <li :class="type==1?'active':''" @click="changeType(1)">
              <span>详细说明</span>
            </li>
            <li :class="type==2?'active':''" @click="changeType(2)">
              <span>作品样片</span>
            </li>
            <li :class="type==3?'active':''" @click="changeType(3)">
              <span>常见问题</span>
            </li>
          </ul>
        </div>
        <div class="c-20">
          <!--作品挂牌显示信息-->
          <div class="c-21" v-if="type==1">
            <!--作品信息-->
            <div v-if="Work.tradingType==0" class="c-22">
              <div class="c-23">
                <div class="c-24">挂牌信息</div>
              </div>
              <ul class="c-25">
                <li>
                  <div class="c-26">作品名称：</div>
                  <div class="c-27">
                    <div class="c1-27">
                      <span>{{Work.productName}}</span>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="c-26">作品类别：</div>
                  <div class="c-27">
                    <div class="c1-27">
                      <span>{{worksTypeFormat(Work.hzjyWorks)}}</span>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="c-26">作品信息：</div>
                  <div class="c-27">
                    <div class="c1-27">
                      <label>作品类别：</label>
                      <span>{{worksTypeFormat(Work.hzjyWorks)}}</span>
                    </div>
                    <div class="c1-27">
                      <label>题&emsp;&emsp;材：</label>
                      <span>{{worksThemeFormat(Work.hzjyWorks)}}</span>
                    </div>
                    <div class="c1-27">
                      <label>地&emsp;&emsp;区：</label>
                      <span>{{worksRegionFormat(Work.hzjyWorks)}}</span>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="c-26">作品创作性质：</div>
                  <div class="c-27">
                    <div class="c1-27">
                      <span>原创{{creationTypeFormat(Work.hzjyWorks)}}</span>
                      <label style="margin-left: -25px;">(备注：{{Work.hzjyWorks.creationRemark}})</label>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="c-26">创作完成日期：</div>
                  <div class="c-27">
                    <div class="c1-27">
                      <span>{{Work.hzjyWorks.endTime.substring(0,10)}}</span>
                    </div>
                  </div>
                </li>

                <li>
                  <div class="c-26">发行地区：</div>
                  <div class="c-27">
                    <div class="c1-27">
                      <span>{{Work.hzjyWorks.issueRegion}}</span>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="c-26">主要创作人员：</div>
                  <div class="c-27">
                    <div class="c1-27">
                      <span>{{Work.hzjyWorks.authors}}</span>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="c-26">作品权益类型：</div>
                  <div class="c-27">
                    <div class="c1-27">
                      <span v-for="item in tradingPowerList">
                        {{powerTypeFormat(item)}}
                      </span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>

            <!--项目信息-->
            <div v-if="Work.tradingType==1" class="c-22">
              <div class="c-23">
                <div class="c-24">挂牌信息</div>
              </div>
              <ul class="c-25">
                <li>
                  <div class="c-26">作品名称：</div>
                  <div class="c-27">
                    <div class="c1-27">
                      <span>{{Work.productName}}</span>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="c-26">作品类别：</div>
                  <div class="c-27">
                    <div class="c1-27">
                      <span>{{projectTypeFormat(Work.hzjyProject)}}</span>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="c-26">作品类别：</div>
                  <div class="c-27">
                    <div class="c1-27">
                      <span>{{projectTypeFormat(Work.hzjyProject)}}</span>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="c-26">作品创作性质：</div>
                  <div class="c-27">
                    <div class="c1-27">
                      <span>{{creationTypeFormat(Work.hzjyProject)}}</span>

                    </div>
                  </div>
                </li>
                <li>
                  <div class="c-26">创作完成日期：</div>
                  <div class="c-27">
                    <div class="c1-27">
                      <span>{{Work.hzjyProject.creationFinishTime.substring(0,10)}}</span>
                    </div>
                  </div>
                </li>

                <li>
                  <div class="c-26">创作完成地点：</div>
                  <div class="c-27">
                    <div class="c1-27">
                      <span>{{Work.hzjyProject.creationFinishSite}}</span>
                    </div>
                  </div>
                </li>

                <li>
                  <div class="c-26">作品权益类型：</div>
                  <div class="c-27">
                    <div class="c1-27">
                      <span v-for="item in tradingPowerList">
                        {{powerTypeFormat(item)}}
                      </span>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="c-26">发表状态：</div>
                  <div class="c-27">
                    <div class="c1-27">
                      <span>{{Work.hzjyProject.publishedState==0?'未发表':'已发表'}}</span>
                      <span>首次发表日期：{{Work.hzjyProject.publishedFirstTime.substring(0,10)}}</span>
                      <span>国家：{{Work.hzjyProject.publishedCountry}}</span>
                      <span>城市：{{Work.hzjyProject.publishedCity}}</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>

            <!--项目信息2-->
            <div v-if="Work.tradingType==1" class="c-22">
              <div class="c-23">
                <div class="c-24">标的信息</div>
              </div>
              <ul class="c-25">
                <li>
                  <div class="c-26">权利拥有状况：</div>
                  <div class="c-27">
                                <span v-for="item in possessPowerList">
                                  {{powerTypeFormat(item)}}
                                </span>
                  </div>
                </li>
                <li>
                  <div class="c-26">挂牌标的：</div>
                  <div class="c-27">
<<<<<<< Updated upstream
                                <span v-for="item in tradingPowerList">
                                  {{powerTypeFormat(item)}}
                                </span>
=======
                    
                    <span>发表权&emsp;署名权&emsp;修改权&emsp;保护作品完整权&emsp;复制权&emsp;发行权&emsp;出租权&emsp;展览权&emsp;表演权&emsp;放映权&emsp;广播权</span>
>>>>>>> Stashed changes
                  </div>
                </li>
                <li>
                  <div class="c-26">许可方式：</div>
                  <div class="c-27">
                    <div class="c1-27">
                      <span>专有</span>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="c-26">许可期限：</div>
                  <div class="c-27">
                    <div class="c1-27">
                      <span>永久</span>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="c-26">许可区域：</div>
                  <div class="c-27">
                    <div class="c1-27">
                      <span>无</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>


            <div class="c-22">
              <div class="c-23">
                <div class="c-24">作品简介</div>
              </div>
              <div class="c-37">
                {{Work.tradingType==0?Work.hzjyWorks.worksExplain:Work.hzjyProject.projectExplain}}
              </div>
            </div>
            <div class="c-28">
              <div class="c-23">
                <div class="c-24 c-29">对摘牌方资质要求</div>
              </div>
              <div class="c-37">
                <ul class="c-38">
                  <li v-for="item in delistImageList">
                    <img class="c-39" :src="item" />
                  </li>
                </ul>
              </div>
            </div>
            <div class="c-28">
              <div class="c-23">
                <div class="c-24 c-29">对摘牌方资质要求</div>
              </div>
              <form class="c-30">
                <div class="c-31">
                  <span class="c-32">说明：{{Work.delistText}}</span>
                </div>
                <div class="c-40">
                  <label class="b-14">
                    <input name="assignment" type="checkbox" value />我已阅读并同意
                  </label>
                  <a class="c-41" href="javascript:;">《摘牌协议书》</a>
                </div>
                <button class="c-36" @click="delistApply(Work.productId)">申请摘牌</button>
              </form>
            </div>
          </div>

          <div class="c-21" v-if="type==2">
            <div class="c-22">
              <div class="c-23">
                <div class="c-24">作品样片</div>
              </div>
              <div class="c-42" style="width:100%;overflow :hidden">
                <el-carousel :interval="4000" type="card" height="350px" :autoplay="false" dataimg="1">
                  <el-carousel-item v-for="item in basicImageList" >
                    <div class="carousel-explain">
                      <img :src="item" style="width:600px;height:350px">
                    </div>
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>
          </div>

          <div class="c-21" v-if="type==3">
            <div class="c-22">
              <div class="c-23">
                <div class="c-24">挂牌信息</div>
              </div>
              <div class="c-43">
                <ul class="c-44">
                  <li>
                    <div class="c-45">
                      <span class="c-46">问题一：</span>
                      <span class="c-47">天气好，能否出门晒太阳杀灭新型冠状病毒？</span>
                    </div>
                    <div class="c-48">
                      <span class="c-49">不可以。</span>
                      <span class="c-50">太阳的照射温度无法达到56度，如果要外出，需佩戴好口罩以及必要的防护，避开人群密集地方。</span>
                    </div>
                  </li>
                  <li>
                    <div class="c-45">
                      <span class="c-46">问题二：</span>
                      <span class="c-47">天气好，能否出门晒太阳杀灭新型冠状病毒？</span>
                    </div>
                    <div class="c-48">
                      <span class="c-49">不可以。</span>
                      <span class="c-50">
                        太阳的照射温度无法达到56度，如果要外出，需佩戴好口罩以及必要的防护，避开人群密集地方。太阳的照射温度无法达到56度，如果要外出，
                        需佩戴好口罩以及必要的防护，避开人群密集地方。
                      </span>
                    </div>
                  </li>
                  <li>
                    <div class="c-45">
                      <span class="c-46">问题三：</span>
                      <span class="c-47">天气好，能否出门晒太阳杀灭新型冠状病毒？</span>
                    </div>
                    <div class="c-48">
                      <span class="c-49">不可以。</span>
                      <span class="c-50">太阳的照射温度无法达到56度，如果要外出，需佩戴好口罩以及必要的防护，避开人群密集地方。</span>
                    </div>
                  </li>
                  <li>
                    <div class="c-45">
                      <span class="c-46">问题四：</span>
                      <span class="c-47">天气好，能否出门晒太阳杀灭新型冠状病毒？</span>
                    </div>
                    <div class="c-48">
                      <span class="c-49">不可以。</span>
                      <span class="c-50">
                        太阳的照射温度无法达到56度，如果要外出，需佩戴好口罩以及必要的防护，避开人群密集地方。太阳的照射温度无法达到56度，如果要外出，
                        需佩戴好口罩以及必要的防护，避开人群密集地方。
                      </span>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import http from "@/api/home";
import Header from "../header";
export default {
  name: "index",
  components: { Header },
  created() {
    console.log("获取路径上的ID");
    this.getDicts("project_type").then(response => {   //项目类型
      this.projectTypeOptions = response.data;
    });
    this.getDicts("works_type").then(response => {  //作品类型
      this.worksTypeOptions = response.data;
    });
    this.getDicts("works_theme").then(response=>{   //作品题材
      this.worksThemeOptions = response.data;
    });
    this.getDicts("works_region").then(response=>{  //作品地区
      this.worksRegionOptions=response.data;
    })
    this.getDicts("creation_type").then(response=>{  //创作性质
      this.creationTypeOptions=response.data;
    })
    this.getDicts("power_type").then(response=>{   //权利
      this.powerTypeOptions=response.data;
    })
    this.WorkId = this.$route.query.product;
    this.GetWorks();  //获取作品详情
    this.GetnoticeList();  //获取系统公告
  },
  data() {
    return {
      Work: Object,
      WorkId: null,
      type: 1,
    };
  },
  methods: {
    projectTypeFormat(row){
      return this.selectDictLabel(this.projectTypeOptions, row.projectType);
    },
    worksTypeFormat(row){
      return this.selectDictLabel(this.worksTypeOptions, row.worksType);
    },
    worksThemeFormat(row){
      return this.selectDictLabel(this.worksThemeOptions, row.worksTheme);
    },
    worksRegionFormat(row){
      return this.selectDictLabel(this.worksRegionOptions, row.worksRegion);
    },
    creationTypeFormat(row){
      return this.selectDictLabel(this.creationTypeOptions,row.creationType)
    },
    powerTypeFormat(row){
      return this.selectDictLabel(this.powerTypeOptions,row)
    },
    // 获取系统公告
    GetnoticeList() {
      var datas = `noticeType=2&pageNum=1&pageSize=10`;
      http.noticeList(datas).then((res) => {
        if (res.code == 200) {
          // 存下轮播新闻

          window.sessionStorage.setItem("lb", JSON.stringify(res.rows));
          this.noticeList = res.rows;
        }
      });
    },
    Addsc(e) {
          let _this = this;
      http
        .Addsc({
          productId: e,
        })
        .then((res) => {
          if (res.code == 200) {
            this.GetWorks();
          }
        });
    },
    //收藏
    Closesc(e) {
      http
        .Closesc({
          productId: e,
        })
        .then((res) => {
          if (res.code == 200) {
            this.$notify({
              title: "成功",
              message: "取消收藏成功",
              type: "success",
            });

            this.GetWorks();
          } else {
            this.$notify.error({
              title: "错误",
              message: "取消失败",
            });
          }
        });
    },
    GetWorks() {
      let _this = this;
      http
        .info({
          productId: _this.WorkId,
        })
        .then((res) => {
          if (res.code == 200) {
            this.Work = res.data;
            this.basicImageList=res.data.basicImage.split(",");  //样片图片逗号分隔字符串转数组
            this.delistImageList=res.data.delistImage.split(",");//摘牌要求图片逗号分隔字符串转数组
            if(res.data.tradingType==0){
              this.tradingPowerList=res.data.hzjyWorks.tradingPower.split(",");
            }else if(res.data.tradingType==1){
              this.possessPowerList=res.data.hzjyProject.possessPower.split(",");
              this.tradingPowerList=res.data.hzjyProject.tradingPower.split(",");
            }

          }
          console.log("最终获取到的tradingPowerList");
          console.log(this.tradingPowerList);
          console.log(res);
        });
    },
    changeType(e) {
      this.type = e;
    },
    delistApply(id, e) {
      //申请摘牌
        this.$router.push({
        name: "delistApply",
        query: {
          product: id,
        },
      });
    },
  },
};
</script>

<style scoped>
.c-32 {
  display: inline-block;
  vertical-align: top;
  color: #333333;
  width: 1000px;
  text-align: left;
  font-size: 14px;
}
@import "../../css/index.css";
@import "../../css/show_works.css";
@import "../../css/idangerous.swiper.css";
</style>
